<template>
  <div class="login-register" :class="classObj">
    <div class="form-box">
      <el-form :model="ruleForm" status-icon :rules="rules"
        ref="ruleForm" label-width="auto" class="demo-ruleForm">
        <app-login v-if="active === 'login'" :rule-form="ruleForm"></app-login>
        <app-register v-else></app-register>

        <el-form-item style="text-align:center">
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import ResizeMixin from './mixin/ResizeHandler';
import { setToken } from '@/utils/auth'; // get token from cookie
import AppLogin from './components/AppLogin.vue';
import AppRegister from './components/AppRegister.vue';

export default {
  name: 'Login',
  components: {
    AppLogin,
    AppRegister,
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      device: state => state.app.device,
    }),
    classObj() {
      console.log('this.device=', this.device);
      return {
        mobile: this.device === 'mobile',
      };
    },
  },
  data() {
    return {
      active: 'login',
      ruleForm: {
        userName: '',
        userPass: '',
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        userPass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const a = setToken('aaaaabbbbbbcccc') || null;
          console.log('a=', a);
          if (a) {
            console.log('this.redirect=', this.redirect);
            this.$router.push({ path: this.redirect || '/' });
          }
        } else {
          console.log('error submit!!');
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.login-register {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/image/login/login-1.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: all 0.3s;
  // background-image: url('../../../assets/image/login/login-1.jpg');
  .form-box {
    width: 400px;
    height: 300px;
    padding: 20px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 1px 11px #ffffff;
    /deep/ .el-form-item__label {
      color: #ffffff;
    }
    /deep/ .el-input__inner {
      background-color: transparent;
      color: #ffffff
    }
  }
}
.mobile {
  background-image: url("../../assets/image/login/login-2.jpeg") !important;
  // background-color: red;
  .form-box {
    width: 90vw !important;
    margin: 0 5vw;
    box-shadow: 0px 1px 4px #ffffff;
  }
}
</style>
